<template>
  <div>
	  <div>
		  <div style="margin:2% 0;display: inline-block;">
			  <span>手机号：</span>
			  <el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入手机号" v-model="phone"></el-input>
			<span style="margin-left: 10px;">比赛状态：</span>
			<el-select v-model="eventStatus" class="margin15" placeholder="请选择比赛状态" style="width:200px;" @change="select">
				<el-option v-for="(item,index) in eventStatusnum" :key="item.index" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<span style="margin-left: 10px;">游戏分类：</span>
			<el-select v-model="gameTypeId" class="margin15" placeholder="请选择游戏" style="width:200px;" @change="getGameEvent(gameTypeId)">
				<el-option v-for="(item,index) in gameTypeIds" :key="item.index" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<span style="margin-left: 10px;">赛事标题：</span>
			<el-select v-model="gameEventId" filterable class="margin15" placeholder="请选择赛事标题" style="width:150px;" @change="select">
				<el-option v-for="(item,index) in gameEventIds" :key="item.index" :label="item.title" :value="item.id">
				</el-option>
			</el-select>
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">查询</el-button>
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans">重置</el-button>
		  </div>
	  </div>
	  <el-table
		v-loading="tableDataLoading"
	    :data="typeDatas.content"
		row-key="id">
	    <el-table-column
	  	 prop="id"
	  	 label="编号"
	  	 width="80">
	    </el-table-column>
		<el-table-column
	  	prop="userName"
	  	label="用户名称">
		<template slot-scope="scope">
		  <span style="color: #4f9dec;cursor: pointer;" @click="updates(scope.row)">{{scope.row.userName}}</span>
		</template>
	    </el-table-column>
		<el-table-column
			prop="phone"
			label="手机号">
		</el-table-column>
		 <el-table-column
		 	prop="nickName"
		 	label="游戏昵称">
		 </el-table-column>
		<el-table-column
		prop="gameNumber"
		label="账号"
		width="200">
		<template slot-scope="scope">
				<span v-if="scope.row.area == 1">微信号:{{scope.row.gameNumber}}</span> 
				<span v-if="scope.row.area == 2">QQ号:{{scope.row.gameNumber}}</span>  
			</template>
		</el-table-column>
		<el-table-column
		 prop="gameTypeName"
		 label="游戏分类">
		 </el-table-column>
		 <el-table-column
		  prop="title"
		  label="赛事标题">
		</el-table-column>
		<el-table-column
		   prop="area"
		   label="区域">
		   <template slot-scope="scope">
		   		<span v-if="scope.row.area == 1">微信区</span> 
				<span v-if="scope.row.area == 2">QQ区</span>  
		   	</template>
		</el-table-column>
		<el-table-column
		  prop="tag"
		  label="标签">
		</el-table-column>
		<el-table-column
		  prop="entryMoney"
		  label="报名费">
		</el-table-column>
		<el-table-column
		  prop="couponMoney"
		  label="优惠劵已抵扣"
		  width="160">
		  <template slot-scope="scope">
		  		<span>{{scope.row.couponMoney?scope.row.couponMoney:'无'}}</span> 
		  	</template>
		</el-table-column>
	    <el-table-column
	  	prop="createTime"
	  	label="报名时间"
		width="160">
	    </el-table-column>
		<el-table-column
			fixed="right"
		   prop="eventStatus"
		   label="状态">
		   <template slot-scope="scope">
		   		<span v-if="scope.row.eventStatus == 1">未开始</span> 
				<span v-if="scope.row.eventStatus == 2">进行中</span>
				<span v-if="scope.row.eventStatus == 3">已结束</span>
				<span v-if="scope.row.eventStatus == 4">已解散</span> 
				<span v-if="scope.row.eventStatus == 5">已取消</span>
		   	</template>
		</el-table-column>
		<el-table-column
		fixed="right"
		  label="操作"
		width="120">
		  <template slot-scope="scope">
		    <el-button
			  v-if="scope.row.eventStatus == 1"
		      size="mini"
		      type="primary"
		      @click="cancel(scope.row)">取消报名
		    </el-button>
			<el-button
			  v-else
			  size="mini"
			  disabled
			  type="primary">取消报名
			</el-button>

			<el-button style="margin-top: 10px;"
			  v-if="scope.row.settleStatus == 3"
			  disabled
			  size="mini"
			  type="primary"
			  @click="tuipiao(scope.row)">已退票
			</el-button>
			<el-button style="margin-top: 10px;"
			  v-else
			  size="mini"
			  type="primary"
			  @click="tuipiao(scope.row)">退票
			</el-button>

			<el-button style="margin-top: 10px;"
			  v-if="scope.row.reason"
			  size="mini"
			  type="warning"
			  @click="handleException(scope.row)"
			>处理异常
			</el-button>

		</template>
			
		</el-table-column>
	  </el-table>
	  <div style="text-align: center;margin-top: 10px;">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :page-sizes="[10, 15, 20, 25]"
	      :page-size="size"
	      :current-page="page"
	      layout="total,sizes, prev, pager, next"
	      :total="typeDatas.totalElements">
	    </el-pagination>
	  </div>

	  	<!-- 处理异常弹窗 -->
		<el-dialog title="处理异常" :visible.sync="exceptionDialogFormVisible" center>
		<div style="margin-bottom: 10px;">
			<span style="width: 200px;display: inline-block;text-align: right;">原因：</span>
			<span>{{ exceptionData.reason }}</span>
		</div>
		<div style="margin-bottom: 10px;">
			<span style="width: 200px;display: inline-block;text-align: right;">图片：</span>
			<img @click="exceptionDataImgPre = true" :src="exceptionData.img" style="height: 200px;" />
		</div>
		<!-- 操作按钮 -->
		<div slot="footer" class="dialog-footer">
			<el-button @click="exceptionDialogFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="flowBureau(exceptionData.gameEventId)">流 局</el-button>
		</div>
		<!-- 图片放大显示 -->
		<div v-show="exceptionDataImgPre" style="position:fixed; top: 0; left:0;right:0;bottom:0; text-align: center; font-size: 30px;">
			<i @click="exceptionDataImgPre=false" class="el-icon-circle-close" style="position: absolute; right: 50px; top: 50px; color: #fff;"></i>
			<img :src="exceptionData.img" style="height: 100%;"/>
		</div>
		</el-dialog>
  </div>
</template>

<script>
	export default {
	    data() {
	      return {
				size:10,
				page:1,
				phone:'',
				gameEventId:'',
				gameTypeId:'',
				gameTypeIds:[],
				gameEventId:'',
				gameEventIds:[],
				eventStatus:0,
				eventStatusnum:[
					{
						label: '全部',
						value: 0
					},
					{
						label: '未开始',
						value: 1
					},
					{
						label: '进行中',
						value: 2
					},
					{
						label: '已结束',
						value: 3
					},
					{
						label: '已解散',
						value: 4
					},
					{
						label: '已取消',
						value: 5
					}
				],
				formLabelWidth:'200px',
				tableDataLoading:false,
				dialogFormVisible1:false,
				dialogFormVisible:false,
				typeDatas:[],
				exceptionDialogFormVisible: false,// 异常处理弹窗显示状态
				// 异常弹窗数据
				exceptionData: {
					reason: '',
					img: '',
					gameEventId: '',
				},
				exceptionDataImgPre: false,// 异常弹窗图片预览状态
			}
		},
		methods: {
			handleSizeChange (val) {
			  this.size = val
			  this.dataSelect()
			},
			handleCurrentChange (val) {
			  this.page = val
			  this.dataSelect()
			},
			// 查询
			select(){
				this.page = 1
				this.size = 10
				this.dataSelect()
			},
			// 重置
			cleans(){
				this.phone = ''
				this.gameTypeId = ''
				this.gameEventId = ''
				this.dataSelect()
			},
			// 详情跳转
			updates (row) {
			  this.$router.push({path: '/userDetail', query: {userId: row.userId}})
			},
			// 获取游戏分类
			gameClass(){
				this.$http({
				  url: this.$http.adornUrl2('/gameType/result'),
				  method: 'get',
				  params: this.$http.adornParams({
				  })
				}).then(({data}) => {
				  this.tableDataLoading = false
				  let returnData = data.data
				  this.gameTypeIds = returnData
				})  
			},
			// 取消报名
			cancel(row){
				this.$confirm(`确定取消报名?`, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$http({
					url: this.$http.adornUrl2('/gameApply/cancelApply'),
					method: 'get',
					params: this.$http.adornParams({
						'id':row.id
					})
				  }).then(({data}) => {
					  this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
						  this.dataSelect()
						}
					  })
				  })
				}).catch(() => {})		
			},
			//退票
			tuipiao(row){
				this.$confirm(`确定退票?`, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$http({
					url: this.$http.adornUrl2('/gameApply/refund'),
					method: 'post',
					data: this.$http.adornData({
						'ticketType':row.ticketType,
						'userId': row.userId,
						'id': row.id,
						'title': row.title
					})
				  }).then(({data}) => {
					  console.log(data)
					  this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
						  this.dataSelect()
						}
					  })
				  })
				})	
			},
			// 处理异常
			handleException(row){
				const { id:gameApplyId, reason,gameEventId } = row;
				this.$http({
					url: this.$http.adornUrl2('/gameApply/findAbnormal'),
					method: 'get',
					params: this.$http.adornParams({ gameApplyId })
				}).then(({data}) => {
					console.log(data);
					const {data:imgData} = data;
					const {img} = imgData[0];
					this.exceptionData = {reason,img,gameEventId};
					this.exceptionDialogFormVisible = true;
				})
			},
			// 异常处理-流局
			flowBureau(id) { 
				this.$http({
					url: this.$http.adornUrl2('/gameEvent/disEvent'),
					method: 'get',
					params: this.$http.adornParams({ id })
				}).then(({data}) => {
				  this.exceptionDialogFormVisible = false;
				  if(data.status == 0){
					this.$message({
					  message: '操作成功',
					  type: 'success',
					  duration: 1500,
					  onClose: () => {
					    this.dataSelect()
					  }
					})
				  }else{
					  this.$message({
						message: data.msg,
						type: 'error',
						duration: 1500,
						onClose: () => {
						  this.dataSelect()
						}
					  })
				  }
		    })
			},
			// 获取进行中的赛事
			getGameEvent(gameTypeId){
				this.$http({
				  url: this.$http.adornUrl2('/gameEvent/allGame'),
				  method: 'get',
				  params: this.$http.adornParams({
					'gameTypeId':gameTypeId,
				  })
				}).then(({data}) => {
				  this.tableDataLoading = false
				  let returnData = data.data
				  this.gameEventIds = returnData
				})
			},
			// 获取进行中的赛事
			getGameEvent2(gameTypeId){
				this.$http({
				  url: this.$http.adornUrl2('/gameEvent/allGame'),
				  method: 'get',
				  params: this.$http.adornParams({
					'gameTypeId':gameTypeId,
				  })
				}).then(({data}) => {
				  this.tableDataLoading = false
				  let returnData = data.data
				  this.gameEventIds = returnData
				})
			},
			// 获取分类数据
			dataSelect2 () {
				let gameTypeId = this.$route.query.gameTypeId
				let gameEventId = this.$route.query.gameEventId
				this.gameTypeId = gameTypeId
				this.gameEventId = gameEventId
			   let page = this.page - 1
			  this.tableDataLoading = true
			  this.$http({
				url: this.$http.adornUrl2('/gameApply/list'),
				method: 'get',
				params: this.$http.adornParams({
					'page':page,
					'size':this.size,
					'phone':this.phone,
					'gameTypeId':this.gameTypeId,
					'gameEventId':this.gameEventId,
					'eventStatus':this.eventStatus
				})
			  }).then(({data}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.typeDatas = returnData
			  })
			},
			// 获取分类数据
			dataSelect () {
			  let page = this.page - 1
			  this.tableDataLoading = true
			  this.$http({
				url: this.$http.adornUrl2('/gameApply/list'),
				method: 'get',
				params: this.$http.adornParams({
					'page':page,
					'size':this.size,
					'phone':this.phone,
					'gameTypeId':this.gameTypeId,
					'gameEventId':this.gameEventId,
					'eventStatus':this.eventStatus,
					
				})
			  }).then(({data}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					console.log(returnData)
					this.typeDatas = returnData
			  })
			}
		},
		mounted() {
			this.gameClass()
			let gameTypeId = this.$route.query.gameTypeId
			this.getGameEvent2(gameTypeId)
			if(gameTypeId>0){
				this.dataSelect2()	
			}else{
				this.dataSelect()
			}
		}
	  };
</script>

<style>
	
</style>
